<template>
    <view class="authInfo">
        <view class="base">
            <view class="row">
                <view class="label">姓名:</view>
                <view class="value">{{ authInfo.nickname }}</view>
            </view>
            <view class="row">
                <view class="label">手机号码:</view>
                <view class="value">{{ authInfo.userMobile }}</view>
            </view>
            <view class="row">
                <view class="label">身份证号:</view>
                <view class="value">{{ authInfo.idNumber }}</view>
            </view>
            <view class="row">
                <view class="label">身份认照片:</view>
                <view class="value" style="color: blue;" @click="viewIdnumberImage" v-if="authInfo.idNumberFrontImage || authInfo.idNumberBackImage">查看</view>
                <view class="value" style="color: red;" v-else>未上传</view>
            </view>
            <view class="row">
                <view class="label">银行卡信息:</view>
                <view class="value" style="color: blue;" @click="viewBankInfo" v-if="authInfo.bankCardNumber">查看</view>
                <view class="value" style="color: red;" v-else>未上传</view>
            </view>
        </view>
        <view class="base" v-if="authInfo.status == 2">
            <view class="tips mt24">
                <text>您的个人身份信息审核失败,请</text>
                <text style="color: blue;" @click="makePhone">联系客服</text>
                <text>，了解拒绝原因，或者</text>
                <text style="color: blue;" @click="toAuth()">重新提交</text>
                <text>。</text>
            </view>
        </view>
    </view>
    <view class="bottom_btn">
        <view class="btn flex_c" v-if="authInfo.status == -1" @click="toAuth()">去认证</view>
        <view class="btn flex_c" v-else-if="authInfo.status == 0" style="opacity: 0.6;">审核中</view>
        <view class="btn flex_c" v-else-if="authInfo.status == 1" @click="toAuth()">修改</view>
        <view class="btn flex_c" v-else-if="authInfo.status == 2" @click="toAuth()">重新提交</view>
    </view>
    <!-- 查看身份证照片 -->
    <up-popup :show="showidNumberImage" mode="center" :round="10" @close="showidNumberImage = false">
        <view class="popup_content">
            <view class="popup_title">身份证照片</view>
            <view class="row">
                <view class="label">身份证正面:</view>
                <view class="value">
                    <myUploadImg :imgList="idNumberFrontImageList" :max="1" disabled>
                    </myUploadImg>
                </view>
            </view>
            <view class="row">
                <view class="label">身份证背面:</view>
                <view class="value">
                    <myUploadImg :imgList="idNumberBackList" :max="1" disabled>
                    </myUploadImg>
                </view>
            </view>
        </view>
    </up-popup>
    <!-- 查看银行卡信息 -->
    <up-popup :show="showBankInfo" mode="center" :round="10" @close="showBankInfo = false">
        <view class="popup_content">
            <view class="popup_title">银行卡信息</view>
            <!-- <view class="row">
                <view class="label">开户行:</view>
                <view class="value">{{ authInfo.openingBank }}</view>
            </view> -->
            <!-- <view class="row">
                <view class="label">开户支行:</view>
                <view class="value">{{ authInfo.accountOpeningBranch }}</view>
            </view> -->
            <view class="row">
                <view class="label">银行卡号:</view>
                <view class="value">{{ authInfo.bankCardNumber }}</view>
            </view>
            <view class="row">
                <view class="label">银行卡所属:</view>
                <view class="value">{{ `${authInfo.provinceName} ${authInfo.cityName}` }}</view>
            </view>
            <view class="row">
                <view class="label">银行卡照片:</view>
                <view class="value">
                    <myUploadImg :imgList="bankCardImageList" :max="1" disabled>
                    </myUploadImg>
                </view>
            </view>
        </view>
    </up-popup>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import myUploadImg from '@/components/my-uploadImg/my-uploadImg.vue';
import { useMemberStore } from '@/stores'
import { ref } from 'vue';
import config from '@/utils/config';
const useMember = useMemberStore()
const { isLogin } = useMember

const authInfo = ref({
    nickname: '',
    userMobile: '',
    idNumber: '',
    idNumberFrontImage: '',
    idNumberBackImage: '',
    // openingBank: '',
    // accountOpeningBranch: '',
    bankCardNumber: '',
    bankCardImage: '',
    provinceName:'',
    cityName:'',
    status: -1 // 审核状态 -1未提交 0审核中 1审核通过 2审核未通过
})
const idNumberFrontImageList = ref<string[]>([])
const idNumberBackList = ref<string[]>([])
const bankCardImageList = ref<string[]>([])

onShow(() => {
    if (!isLogin) return
    idNumberFrontImageList.value = []
    idNumberBackList.value = []
    bankCardImageList.value = []
    getAuthInfo()
})
// 查询认证信息
const getAuthInfo = async () => {
    const data = useMember.authInfo
    if (data) {
        authInfo.value = data
        data.idNumberFrontImage && idNumberFrontImageList.value.push(data.idNumberFrontImage)
        data.idNumberBackImage && idNumberBackList.value.push(data.idNumberBackImage)
        data.bankCardImage && bankCardImageList.value.push(data.bankCardImage)
    }
}
// 查看身份证照片
const showidNumberImage = ref(false)
const viewIdnumberImage = () => {
    showidNumberImage.value = true
}
// 查看银行卡信息
const showBankInfo = ref(false)
const viewBankInfo = () => {
    showBankInfo.value = true
}
// 前往认证
const toAuth = () => {
    if (!isLogin) return
    uni.navigateTo({
        url: '/pages/mine/authentication/authentication'
    })
}
const { customerServicePhone } = config;
const makePhone = () => {
    uni.makePhoneCall({
        phoneNumber: customerServicePhone,
        fail: (fail) => { },
    })
}
</script>

<style lang="scss" scoped>
@import './authInfo.scss';

.authInfo {
    min-height: 100vh;
    background: #f8f8f8;
    overflow: hidden;
}
</style>